<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			/* 使用CSS的timeline-scope属性改变动画时间线的作用范围。 */
		    timeline-scope: --scaleFade;
		}
		.scroller {
		    height: 200px;
		    border: 1px solid;
		    overflow: auto;
		    scroll-timeline: --indicator;
		}
		.scroller ins {
		    display: block;
		    border-top: solid green;
		    animation-name: widthExpand;
		    animation-duration: 1ms; /* Firefox需要设置这个*/
		    animation-timeline: --indicator;
		    position: sticky;
		    top: 0;
		}
		@keyframes widthExpand {
		    from { width: 0%; }    
		    to { width: 100%; }
		}
		.scroller img {
		    max-width: 100%;
		    animation: 1ms scaleUp both, 1ms fadeIn both;
		    animation-timeline: --scaleFade;
		    view-timeline: --scaleFade;
		}
		
		.target {
		    animation: 1ms scaleRoate both, 1ms fadeIn both;
		    animation-timeline: --scaleFade;
		}
		
		@keyframes scaleRoate {
		    from { transform: scale(0) rotate(0deg); }    
		    to { transform: scale(1) rotate(360deg); }
		}
		
		@keyframes scaleUp {
		    from { transform: scale(0); }    
		    to { transform: scale(1); }
		}
		
		@keyframes fadeIn {
		    from { opacity: 0; }    
		    to { opacity: 1; }
		}
	</style>
	<body>
		<div class="scroller">
			<ins></ins>
			<div style="height: 400px;"></div>
			<img src="../image/02.jpg" alt="" />
		</div>
		<img class="target" src="../image/04.jpg" alt="" />
		<a href="https://www.zhangxinxu.com/wordpress/2024/08/css-scroll-timeline/">文章出处</a>
	</body>
</html>